<template>
  <view>
    <view class="h1">
      <view>
        <uni-row>
          <uni-col :span="22">
            <view v-if="phone">
              <view v-if="phone === record[0].personal1.phone">
                <image src="../../static/personal.jpg" class="img1"></image>
              </view>
              <view v-if="phone === record[1].team1.phone">
                <image src="../../static/group.jpg" class="img1"></image>
              </view>
            </view>
            <view v-else>
              <image src="../../static/moren.png" class="img1"></image>
            </view>
          </uni-col>
          <uni-col :span="2"  style="text-align: left">
            <image src="../../static/推出.png" class="img2" @click="toIndex"></image>
          </uni-col>
        </uni-row>
      </view>

      <view v-if="phone" class="h2">
        <text v-if="phone === record[0].personal1.phone" class="word1">
          {{record[0].personal1.name}}
        </text>
        <text v-if="phone === record[1].team1.phone" class="word1">
          {{record[1].team1.tname}}
        </text>
      </view>
      <view v-else class="h2">
        <text @click="toOnload" class="word1">点击登录</text><br>
      </view>

      <view class="h2">
        <text class="word2">欢迎来到袁隆平杂交水稻科学园</text>
      </view>
    </view>

    <view class="h3">
      <view>
        <uni-row>
          <uni-col :span="22" style="margin-top: 16px;">
            <text class="word3">预约记录</text>
          </uni-col>
          <uni-col :span="2" style="margin-top: 16px; text-align: left">
            <image src="../../static/下一页.png" class="img3"></image>
          </uni-col>
        </uni-row>
      </view>
      <view v-if="phone === record[0].personal1.phone">
        <uni-card @click="toPersonal_zheng">
          预约类型：{{record[0].personal1.type}}<br>
          姓名：{{record[0].personal1.name}}<br>
          时间：2024年9月{{day}} {{period}}
        </uni-card>
      </view>
      <view v-else-if="phone === record[1].team1.phone">
        <uni-card @click="toTeam_zheng">
          预约类型：{{record[1].team1.type}}<br>
          团队名称：{{record[1].team1.tname}}<br>
          时间：2024年9月{{day}} {{period}}
        </uni-card>
      </view>
      <view v-else>
        <view class="h4">
          <image src="../../static/img.png" class="img4"></image>
        </view>
        <view class="h4">
          <text class="word4">暂无预约记录</text>
        </view>
      </view>
    </view>

    <view class="h5">
      <uni-row>
        <uni-col :span="12" style="text-align: right">
          <image src="../../static/12.png" class="img5"></image>
        </uni-col>
        <uni-col :span="1" style="text-align: center">
          <text class="word5">x</text>
        </uni-col>
        <uni-col :span="11" style="text-align: left">
          <image src="../../static/zhongbei.png" class="img6"></image>
        </uni-col>
      </uni-row>
    </view>
    <view class="h6">
      <text class="word6">技术支持：中北大学</text>
    </view>

  </view>
</template>

<script setup>
import {ref} from 'vue'
import {onShow} from '@dcloudio/uni-app'
import data from '../../data/y_data.json'

let record = data.record

let day =sessionStorage.getItem("day")
let period = sessionStorage.getItem("period")

let toIndex = function (){
  uni.switchTab({
    url: '/pages/apointment/index'
  })
}
let toPersonal_zheng = function (){
  uni.navigateTo({
    url:'personal-zheng'
  })
}
let toTeam_zheng = function (){
  uni.navigateTo({
    url:'group-zheng'
  })
}
let toOnload = function (){
  uni.navigateTo({
    url:'onload'
  })
}
// 存储从 sessionStorage 中读取的手机号和密码
let phone = ref('')
let password = ref('')
onShow(() => {
  let storedPhone = sessionStorage.getItem('phone');
  let storedPassword = sessionStorage.getItem('password');
    console.info(storedPhone)
  if (storedPhone) {
    phone.value = storedPhone;
  }

  if (storedPassword) {
    password.value = storedPassword;
  }
});
</script>

<style scoped>
    .h1{
        width: 94%;
        height: 148px;
        background: #FFFFFF;
        border-radius: 12px;
        margin: 12px;
    }
    .img1{
        width: 50px;
        height: 50px;
        margin-top:20px;
        margin-left: 49%;
    }
    .img2{
      width: 18px;
      height: 18px;
      margin-top:12px ;
    }
    .h2{
        text-align: center;
        margin-top: 5px;
    }
    .word1{
        width: 60px;
        height: 21px;
        font-family: PingFangSC-Medium;
        font-weight: 600;
        font-size: 15px;
        color: #000000;
        letter-spacing: 0;
    }
    .word2{
        width: 168px;
        height: 17px;
        opacity: 0.75;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #323232;
        letter-spacing: 0;
    }
    .h3{
        width: 94%;
        height: 396px;
        background: #FFFFFF;
        border-radius: 12px;
        margin-left: 12px;
    }
    .word3{
        width: 60px;
        height: 21px;
        font-family: PingFangSC-Medium;
        font-weight: 600;
        font-size: 15px;
        color: #323232;
        letter-spacing: 0;
        margin-top: 16px;
        margin-left: 12px;
    }
    .img3{
        width: 16px;
        height: 16px;
    }
    .img4{
        width: 141px;
        height: 130px;

        margin-top: 96px;
    }
    .h4{
      margin-top: 13px;
      text-align: center;
    }
    .word4{
        width: 60px;
        height: 15px;
        opacity: 0.7;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 10px;
        color: #393939;
        letter-spacing: 0;
    }
    .h5{
        text-align: center;
        margin-top: 10px;
      padding-right: 12px;
    }
    .word5{
        width: 7px;
        height: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 10px;
        color: #393939;
        letter-spacing: 0;
    }
    .img5{
        width: 22px;
        height: 22px;
        border-radius: 50%;

    }
    .img6{
        width: 22px;
        height: 22px;
        border-radius: 50%;

    }
    .h6{
        text-align: center;
        margin-bottom: 7px;
    }
    .word6{
        width: 110px;
        height: 14px;
        opacity: 0.7;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 10px;
        color: #393939;
        letter-spacing: 0;
    }
</style>
